<script>
import {fu_ben} from '@/activity/fu_ben/fu_ben.js'
import {ref} from 'vue'
import fu_ben_detail from '@/components/fu_ben_detail.vue'
import zong_men_detail from "@/components/zong_men_detail.vue";

export default {
  props: ['changRouter'],
  setup (props) {
    let in_come = ref(false)
    let dungeon_num = ref(0)
    return {
      in_come,
      dungeon_num,
      fu_ben,
      xian(){
        props.changRouter("xian")
      },
      changeCome(){
        in_come.value = false
      },
    }
  },
  methods: {
    // 进入关卡
    goto_dungeon(index) {
      this.dungeon_num = index
      this.in_come = true
    }
  },
  components: {
    zong_men_detail,
    "fu_ben_detail": fu_ben_detail
  }
}
</script>

<template>
  <div v-if="!in_come" class="fu_ben_main">
    <n-divider>试炼</n-divider>
    <div class="item" v-for="(v,i) in fu_ben" @click="goto_dungeon(i)">{{ v.name }}</div>
  </div>
  <div v-else>
    <fu_ben_detail :dungeon_num="dungeon_num" :xian="xian" @changeCome="changeCome"></fu_ben_detail>
  </div>
</template>

<style scoped>

.fu_ben_main {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  justify-content: space-around;
}

.item {
  width: 168px;
  height: 120px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 8px;
  line-height: 120px;
  text-align: center;
  user-select: none;
  cursor: pointer;
}

</style>
